<template>
<div>
  <div class="tabNav">
   <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b>/<img src="../assets/img/business.png" />企业列表</b>
  </div>
  <input ref="copyInput" type="text" :value="textToCopy" readonly style="opacity: 0; position: absolute;">
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd table-drop" shadow="hover">
                <div class="search">
                  <el-input v-model="input" placeholder="企业名称/统一社会信用代码"></el-input>
                  <el-select v-model="value" placeholder="全部">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-button type="primary" @click="getTableData()">查询</el-button>
                </div>
                <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"
                ref="multipleTable"
                @sort-change="sortChange"
                >
                <el-table-column prop="id" sortable="custom" align="center" label="ID" width="70"> </el-table-column>
                <el-table-column
                    prop="name"
                     sortable="custom"
                    align="center"
                    label="企业名称"
                     width="200"
                >
                </el-table-column>
                <el-table-column prop="socialCreditCode" sortable="custom" min-width="140" align="center" label="统一社会信用代码">
                </el-table-column>
                <el-table-column prop="linkManName" sortable="custom" align="center" label="联系人" width="100">
                </el-table-column>
                <el-table-column prop="legalPhone" sortable="custom" align="center" label="联系人手机号" width="120">
                </el-table-column>
                <el-table-column prop="username" sortable="custom" align="center" label="登录账号">
                </el-table-column>
                <el-table-column prop="createTime" sortable="custom" align="center" label="创建时间" width="170">
                    <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="billedAmount" align="center" label="状态" width="100">
                    <template #default="item">
                      {{ isDisable[item.row.isDisable] }}
                    </template>
                </el-table-column>
                <el-table-column prop="phone" align="center" label="资质附件">
                  <template #default="item">
                    <span v-if="item.row.qualAttachmentUrl == null">-</span>
                    <el-button v-else class="open-crm" type="text" @click="openImgUrl(item.row.qualAttachmentUrl)">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="170"
                    class-name="editor"
                >
                  <template #default="item">
                    <el-button type="text" @click="getBusinessList(item.row.id)">详情</el-button>|
                    <el-button @click="updateTaskStatus(item.row.id,1)" v-if="item.row.isDisable == 0" type="text">启用</el-button>
                    <el-button @click="enableTask(item.row.id,0)" v-else type="text">禁用</el-button>|
                    <el-button type="text" @click="resetPassword(item.row.id)">密码重置</el-button>
                  </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
                <el-dialog title="企业详情" v-model="businessListShow" custom-class="examine-style" width="70%">
                  <div class="modifyPassword">
                      <div class="details-box">
                        <el-divider></el-divider>
                      <div class="details-title" style="margin-bottom: 30px;">公司信息</div>
                      </div>
                      <div class="details-table">
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">公司名称</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{businessList.name}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">统一社会信用代码</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{businessList.socialCreditCode}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">公司类型</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{ $store.state.companyType[businessList.businessType] }}</div>
                          </el-col>

                           <el-col :span="4">
                            <div class="box-col col-title">企业码</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{ businessList.businessNo}}</div>
                          </el-col>
                          
                        </el-row>
                        <el-row>
                           <el-col :span="4">
                            <div class="box-col col-title">联系人姓名</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{businessList.linkManName}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">联系人身份证号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{businessList.linkManIdcard}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">联系人身份证正面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <span v-if="businessList.linkIdcardFrondUrl == null || businessList.linkIdcardFrondUrl == ''">-</span>
                              <el-image
                                v-else
                                style="width: 160px; height: 80px"
                                :src="businessList.linkIdcardFrondUrl"
                                :preview-src-list="[businessList.linkIdcardFrondUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">联系人身份证反面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <span v-if="businessList.linkIdcardBackUrl == null || businessList.linkIdcardBackUrl == ''">-</span>
                              <el-image
                                v-else
                                style="width: 160px; height: 80px"
                                :src="businessList.linkIdcardBackUrl"
                                :preview-src-list="[businessList.linkIdcardBackUrl]">
                              </el-image>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                           <el-col :span="4">
                            <div class="box-col col-title">法人姓名</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">
                              <template v-if="businessList.legalName == null">--</template>
                              <template v-else>{{businessList.legalName}}</template>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">法人身份证号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">
                              <template v-if="businessList.legalIdcard == null">--</template>
                              <template v-else>{{businessList.legalIdcard}}</template>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">法人身份证正面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <span v-if="businessList.legalIdcardFrondUrl == null || businessList.legalIdcardFrondUrl == ''">-</span>
                              <el-image
                                v-else
                                style="width: 160px; height: 80px"
                                :src="businessList.legalIdcardFrondUrl"
                                :preview-src-list="[businessList.legalIdcardFrondUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">法人身份证反面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <span v-if="businessList.legalIdcardBackUrl == null || businessList.legalIdcardBackUrl == ''">-</span>
                              <el-image
                                v-else
                                style="width: 160px; height: 80px"
                                :src="businessList.legalIdcardBackUrl"
                                :preview-src-list="[businessList.legalIdcardBackUrl]">
                              </el-image>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">营业执照</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 160px; height: 80px"
                                :src="businessList.licenseUrl"
                                :preview-src-list="[businessList.licenseUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">业务合作协议</div>
                          </el-col>
                          <el-col :span="8">
                            <div v-if="businessList.agreementUrl != null" class="box-col col-content img-height">
                              <el-link type="primary" href="javascript:void(0)" @click="openUrl(businessList.agreementUrl)">查看业务合作协议</el-link>
                            </div>
                            <div v-else class="box-col col-content img-height">
                              --
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4" v-if="businessList.qrUrl">
                            <div class="box-col col-title img-height">服务者二维码</div>
                          </el-col>
                          <el-col :span="8" v-if="businessList.qrUrl">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 120px; height: 120px"
                                :src="businessList.qrUrl"
                                :preview-src-list="[businessList.qrUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">行业</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{businessList.industyMsg}}</div>
                          </el-col>
                        </el-row>
                        <!-- <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">登录账号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{businessList.username}}</div>
                          </el-col>
                        <el-col :span="4">
                            <div class="box-col col-title">登录密码</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">123456（默认）</div>
                          </el-col>
                        </el-row> -->
                      </div>
                      <div class="details-box">
                        <!-- <el-divider></el-divider> -->
                      <div class="details-title">公司信息</div>
                        <!-- <b>
                          <i>开户账号:</i>
                          <el-input :disabled="businessFlag" v-model="businessList.bankNo"></el-input>
                        </b>
                        <b>
                          <i>开户行:</i>
                          <el-input :disabled="businessFlag" v-model="businessList.bankName"></el-input>
                        </b> -->
                        <b>
                        <i>浪潮服务费率(‰):</i>
                        <el-input :disabled="businessFlag" v-model="businessList.rateLc"></el-input>
                        </b>
                        <b>
                        <i>服务费率(%):</i>
                        <el-input :disabled="businessFlag" v-model="businessList.rate"></el-input>
                        </b>
                        <b>
                        <i>结算方式:</i>
                        <el-select v-model="settlementMethods" placeholder="线上打款" :disabled="businessFlag">
                          <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </b>
                        </div>
                      </div>
                  <template #footer>
                  <span class="dialog-footer">
                      <el-button @click="businessListShow = false">取 消</el-button>
                      <el-button v-if="businessFlag" type="primary" @click="businessFlag = false">修 改</el-button>
                      <el-button v-else type="primary" @click="businessEidt">完 成</el-button>
                  </span>
                  </template>
                </el-dialog>
            </el-card>
        </el-col>
    </el-row>
    
</div>  
</template>
<script>
import {Decrypt} from '../utils/crypto'
export default {
  props: ['search'],
  data() {
    return {
        textToCopy:'',
        orderByZH: false,
        orderByAsc: false,
        orderByColume: 'bi.createTime',
        businessFlag: true,
        isDisable: {
          0: "禁用",
          1: "启用",
        },
        options: [{
          value: '',
          label: '全部'
        },{
          value: '1',
          label: '已启用'
        }, {
          value: '0',
          label: '已禁用'
        }],
        options1: [
          {
            value: 1,
            label: '线上打款'
          },
          {
            value: 2,
            label: '线下打款'
          },
          {
            value: 3,
            label: '混合打款'
          }
        ],
        // 1线上打款，2线下打款，3混合打款
        userTaskShow: false,
        businessListShow: false,
        modifyPasswordShow: false,
        value: '',
        settlementMethods: 1,
        input: '',
        nowPassword:'',
        newPassword:'',
        okPassword:'',
        tableData: [],
        businessList: [],
        checkboxSelect: 0,
        currentPage: 1,
        total: 0, // 总条数
        arrPage: [10, 20], // 每页条数
        selectPage: 10, // 每页选中条数
        value1: '',
        serviceRate: "",
        dwonloadList: [] // 选中的数据
    };
  },
  created() {
    // console.log(Encrypt("12345"))
    // console.log(Decrypt("9UvIf9WgacCK4/ysyWyvJw=="))
    this.getTableData();
  },
  methods: {
    businessEidt() {
      // 修改企业费率
      if(this.businessList.rate == '') {
        this.$message.error('请输入服务费率')
        return false
      }
      // console.log(this.settlementMethods)
      this.$http({
        url: "/api/quick/oem/business/businessUpdate",
        method: "post",
        data: {
          businessId: this.businessList.id,
          rate: this.businessList.rate,
          bankNo: this.businessList.bankNo, 
          bankName: this.businessList.bankName, 
          settlementMethod: this.settlementMethods, 
          rateLc: this.businessList.rateLc
        },
        headers: {
          "Content-Type": "application/json",
        }
      }).then((data) => {
        if (data.code === 0) {
          this.$message.success('修改成功')
          this.businessListShow = false
          this.businessFlag = true
        }
      });
    },
    getTableData() {
      // 获取列表信息
      this.$http({
        url: "/api/quick/oem/business/getBusinessList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          isDisable: this.value,
          mixedStr: this.input,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData();
    },
    handleSelectionChange() {},
    getBusinessList(id) {
        this.businessFlag = true;
        this.businessListShow = true;
        this.$http({
          url: "/api/quick/oem/business/getBusinessinfo?id=" + id,
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
        }).then((data) => {
          if (data.code === 0) {
            this.businessList = data.result;
        }
      });
    },
    openUrl(url) {
				// 打开新窗口查看pdf
				if(url === '' || url === null || url === undefined) return
				let str = url.substring(0, url.indexOf('?'))
				let suffix = str.substring(str.lastIndexOf('.'), url.length)
				if(suffix === '.PDF' || suffix === '.pdf') {
					this.$http({
					url: "/api/quick/server/consumer/pdfPreView",
					method: "post",
					params: {
						ossPath: url
					},
					responseType: 'blob'
					}).then((data) => {
					const blob = new Blob([data]);
					const href = window.URL.createObjectURL(blob)
					window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
					});
				}else if(suffix === '.txt' || suffix === '.txt') {
					window.open(url);
				} else {
					let newwin = window.open();
					newwin.document.write("<img src=" + url + " />");
				}
			},
    openImgUrl(url) {
      let newwin = window.open()
      newwin.document.write("<img src="+ url +" />")
    },
    resetPassword(id) {
      this.$confirm('是否重置密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/oem/business/upPassword?id=" + id,
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
        }).then((data) => {
          this.textToCopy = Decrypt(data.result)
          this.$confirm('密码已重置为：' + Decrypt(data.result), '提示', {
            confirmButtonText: '复制',
            cancelButtonText: '关闭',
            customClass: 'task-message',
            type: 'warning'
          }).then(() => {
            this.$refs.copyInput.select(); // 选择输入框中的文本
            document.execCommand('copy');
            this.$message.success("复制成功！")
          }).catch(() => {
          });
          // this.$message({
          //   message: '密码已重置',
          //   type: 'success',
          //   offset: 60
          // })
        });
      }).catch(() => {
      });
    },
    updateTaskStatus(id,isDisable) {
      // 启用
      this.$confirm('是否启用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/oem/business/getOnOff?id=" + id + "&isDisable=" + isDisable,
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
        }).then(() => {
          this.$message({
            message: '已启用',
            type: 'success',
            offset: 60
          })
          this.getTableData()
        });
      }).catch(() => {
      });
    },
    enableTask(id,isDisable) {
      // 禁用
      this.$confirm('是否禁用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/oem/business/getOnOff?id=" + id + "&isDisable=" + isDisable,
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
        }).then(() => {
          this.$message({
            message: '已禁用',
            type: 'success',
            offset: 60
          })
          this.getTableData()
        });
      }).catch(() => {
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'bi.createTime'
      }else {
        let orderByZH = false
        if(d.prop == "name" || d.prop == 'legalName') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableData()
    }
  },
};
</script>
<style lang="scss" scoped>
.modifyPassword {
    margin-top: -40px;
}
.modifyPassword .el-form-item {
    margin: 20px 50px;
}
.cardTits .el-table .editor .el-button--text {
    margin-left: 0;
}
.details-box b {
    font-weight: normal;
    font-size: 12px;
}
.details-box .el-select {
    margin: 0 70px 0 15px;
}
.details-box .el-input {
    width: 338px;
}
.details-box .details-title {
  margin-bottom: 0;
}
.details-box b {
    width: 45%;
    display: inline-block;
    margin-top: 30px;
}
.details-box b i {
    font-style: normal;
    color: #6C8198;
    font-size: 13px;
    width: 110px;
    display: inline-block;
    text-align: right;
    margin-right: 12px;
}
.details-box .el-select {
    margin: 0;
}
</style>